<template>
  <div id="app">
    <div class="index_container">
      <template v-for="(l,i) in lineNumbers">
        <div class="line">
          <template v-for="(btn,j) in buttons">
            <template v-if="j%2==i">
              <component :btn="btn" :is="currentView">
                <template scope="props">
                  <dd class="link"><a :href="props.btn.link" target="_blank"
                                      @click.prevent="openUrl(props.btn.link)">进入</a></dd>
                </template>
              </component>
            </template>
          </template>
        </div>
      </template>
    </div>
    <data-table
      :options="{
        columns:[
          { title: 'title1' },
          { title: 'title2' },
          { title: 'title3' },
          { title: 'title4' },
          { title: 'title5' },
          { title: 'title6' }
        ],
        serverSide:false,
        searching:true,
        processing:true,
        lengthChange:false,
        ordering:true,
        paging:true,
        info:true,
        aaSorting:[[0,'asc']]
      }"
      :tableData="tableData"
    ></data-table>
  </div>
</template>

<script type="text/ecmascript-6">
  import MyButton from './components/MyButton'
  import DataTable from './components/DataTable'

  export default {
    data () {
      return {
        buttons: [
          {
            title: '测试应用管理',
            describe: '描述...',
            link: 'appManager.html',
            icon: 'icon05'
          },
          {
            title: '测试设备管理',
            describe: '描述...',
            link: 'deviceManager.html',
            icon: 'icon03'
          },
          {
            title: '测试脚本管理',
            describe: '描述...',
            link: 'scriptManager.html',
            icon: 'icon04'
          },
          {
            title: '测试案例管理',
            describe: '描述...',
            link: 'testcaseManager.html',
            icon: 'icon01'
          },
          {
            title: '批量测试管理',
            describe: '描述...',
            link: 'batchManager.html',
            icon: 'icon01'
          },
          {
            title: '脚本录制',
            describe: '描述...',
            link: 'scriptRecorder.html',
            icon: 'icon02'
          }
        ],
        currentView: 'MyButton',
        tableData: [
          ['Tiger Nixon', 'System Architect', 'Edinburgh', '5421', '2011/04/25', '$320,800'],
          ['Ashton Cox', 'Junior Technical Author', 'San Francisco', '1562', '2009/01/12', '$86,000']
        ]
      }
    },
    components: {
      MyButton,
      DataTable
    },
    computed: {
      lineNumbers () {
        return this.buttons.filter(function (n, i) {
          return i % 3 === 0
        })
      }
    },
    methods: {
      openUrl: function () {
      }
    }
  }
</script>

<style>
  .tab-content {
    margin: 10px;
  }

  .btn{
    margin: 2px 0;
  }

  .index_container{
    padding: 30px;
    overflow: hidden;
  }
  .index_container .line{
    display: -webkit-flex;
    justify-content:space-around;
  }

  .index_container .button{
    width:300px;
    border:2px #ccc solid;
    margin:20px 10px;
    padding:10px;
  }
  .index_container dl{
    width:300px;
    border:2px #ccc solid;
    margin:20px 10px;
    padding:10px;
  }

  .index_container dl:hover{
    border:2px #2c9445 solid;
  }
  .index_container .ia{
    order: 1;
  }
  .index_container .ib{
    order: 2;
  }
  .index_container .ic{
    order: 3;
  }
  .index_container dl dt{
    float:left;
    width: 40%;
    min-width: 80px;
  }
  .index_container dl dd{
    float: left;
    min-width: 100px;
    padding-top: 5px;
  }
  .index_container dl dd.tit{
    font-size:17px;
    font-weight: bold;
  }


</style>
